<!--
 * @Author: coocase
 * @Date: 2021-03-10 14:16:41
 * @LastEditTime: 2021-06-11 12:17:26
 * @LastEditors: coocase
 * @Description: 主页
 * @FilePath: \git\dami\src\pages\index\index.vue
-->
<template>
  <div>
    <el-container>

      <el-header class="index-layout">
        <!--头        -->
        <div class="layout-header">
          <el-row class="header-row">
            <el-col span="12">

              <el-menu class="header-menu" mode="horizontal">

                <el-menu-item class="welcome">
                  <i class="el-icon-s-home"></i>
                  <span>Hi! 欢迎 [</span>
                  <router-link v-if="user.username" :to="{ path: '/consumer/index', query: {userId: userId }}" class="link">{{ user.username }}</router-link>
                  <a v-if="user.username" href="javascript:void(0)" @click="logout">[登出]</a>
                  <span v-else>
                                    <router-link to="/user/login" class="link">登录</router-link>][
                                    <router-link to="/user/register" class="link">注册</router-link>
                                </span>
                  <span> ]</span>
                </el-menu-item>

                <el-submenu class="account" @click.native="">
                  <template slot="title">
                    <a v-if="user.username" href="javascript:void(0)" @click="goToConsumer(user.id)">个人中心</a>
                  </template>
                  <el-menu-item class="menu-item">
                    <span slot="title">个人信息</span>
                  </el-menu-item>
                  <el-menu-item >
                    <span slot="title">我的订单</span>
                  </el-menu-item>
                </el-submenu>

              </el-menu>
            </el-col>

            <el-col span="12">

              <el-menu class="header-menu right" mode="horizontal">
                <el-menu-item class="welcome">
                  <span @click="goToWorker">商户</span>
                </el-menu-item>
                <el-menu-item class="welcome">
                  <span @click="goToAdmin">管理员</span>
                </el-menu-item>


              </el-menu>

            </el-col>
          </el-row>
        </div>
      </el-header>
      <el-main class="index-wrap">
        <!--搜索 -->
        <div class="search-wrap">
          <el-row class="search-row">
            <el-col span="8" class="search-left">
              <img src="../assets/a.png" width="150" @click="goToindex">
              <el-menu mode="horizontal">
                <el-submenu class="search-drop" @click.native="">
                  <template slot="title">
                    <a href="javascript:void(0)">成都</a>
                  </template>
                  <el-menu-item >
                    <span slot="title">上海</span>
                  </el-menu-item>
                  <el-menu-item >
                    <span slot="title">北京</span>
                  </el-menu-item>
                </el-submenu>
              </el-menu>

            </el-col>
            <el-col span="16" class="search-left">
              <el-input placeholder="请输入搜索的内容" v-model="wd">
                <!--slot="append"作用是把按钮追加在文本框里面-->
                <el-button @click="search()" slot="append" icon="el-icon-search"></el-button>
              </el-input>

            </el-col>

          </el-row>
        </div>
        <!--轮播图-->
        <div>
          <router-view/>
        </div>

      </el-main>
      <el-footer>
        <div style="background-image: url('../assets/wave.png');height: 90px"></div>
        <div style="background-color: #3f3f3f;text-align: center;
      color: #b1b1b1;padding: 30px 0">
          <p>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
          <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
          <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
        </div>
      </el-footer>
    </el-container>


  </div>
</template>

<script>

export default {
  name: "index",
  data() {
    return {
      wd: '',
      userId: '',
      user: {}
    };
  },
  methods: {
    goToindex() {
      var path = this.$route.path;
      if (path!="/"){
        this.$router.push({name:"index"})
      }
    },
    goToWorker() {
      var path = this.$route.path;
      if (path!="/"){
        this.$router.push('/worker/login')
      }
    },
    goToAdmin() {
      var path = this.$route.path;
      if (path != "/") {
        this.$router.push('/admin/login')
      }
    },
    goToConsumer(userId) {
      var path = this.$route.path;
      if (path != "/") {
        this.$router.push({ path: '/consumer/index', query: {userId: userId }})

      }
    },
    search() {
      var path = this.$route.path;
      var text = this.wd;
      if (path != "/") {
        this.$router.push({ name: 'result', params: { wd:text} });
      }
    },
    loadUser() {

      let url = 'http://localhost:9081/user/'+this.userId;
      console.log('url = ' + url);

      this.axios.get(url).then((response) => {
        let responseBody = response.data;
        console.log(responseBody);
        if (responseBody.state == 20000) {
          this.$message({
            showClose: true,
            message: '查询成功！',
            type: 'success'
          });
          this.user = responseBody.data;
        } else {
          this.$message({
            showClose: true,
            message: responseBody.message,
            type: 'error'
          });
        }
      });
    },
    logout() {
      this.$router.replace({ path: '/' })
      location.reload();
      this.$message({
        showClose: true,
        message: '退出！',
        type: 'success'
      });
    }
  },
  mounted() {
    // const data = this.$store.state.data;
    // console.log("首页初始化“：",data)

    this.userId=this.$route.query.userId
    console.log('当前的用户id：',this.userId)
    if (this.userId != null) {
      this.loadUser();
    }
    //   this.userId=this.$router.params.userId;
    // console.log("这里");
    //   console.log('当前的用户id：',this.userId)
    // if (this.userId) {
    //   this.loadUser();
    // }
  },
  watch: {
    '$route'() {
      console.log("首页初始化“：",data)
      this.userId=this.$route.query.userId
      console.log('当前的用户id：',this.userId)
      if (this.userId != null) {
        this.loadUser();
      }
      location.reload();

    }
  },
}

</script>

<style scoped>
/*头****************************/
.layout-header {
  padding: 0;
  background-color: #FFFFFF;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid #dcdee2;
}

.index-layout {
   background-color: #FFFFFF;
  z-index: 1000;
  text-color: red;
}

.account {
  z-index: 1100;
}

.header-row {
  width: 1200px;

}

.header-menu {

}
/*.header-menu{*/
/*  background-color: red;*/
/*}*/

.header-menu.ivu-menu::after {
  height: 0px;
}

.header-menu .welcome {
  display: inline-block;
  width: 200px;
  padding: 0px;
}
.menu-item {
  background-color: #db0f0f;
}

.link {
  color: black;
}

.header-menu.right {
  float: right;
}
/*搜索****************************/
.search-wrap {
  padding: 0;
  background-color: #f7f7f7;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid #dcdee2;

  margin: 20px 0;
}
.search-wrap .search-left {
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  padding-right: 150px;
  background-color: #FFFFFF;

}
.search-row {
  display: flex;
  justify-content: space-between;
}
.search {
  display: inline-block;
  width: 700px;

  margin: 20px 0 64px;
}
.ivu-input-group .ivu-input {
  width: 80%;
  border-color: #ff1268;
}
.search-drop {
  align-self: flex-start;
  margin-top: 20px;
  background-color: #FFFFFF;

  font-size: 16px;
}
.search-logo:hover {
  cursor: pointer;
}
/**首页 总格式************************************/
.index-wrap{
  background-color: #FFFFFF;


}
.wrap{
  width: 1200px;
  align-self: center;
}
.index-content{
  margin-top:430px ;
  /* height: 350px; */
  /* 这里误设置了高度导致floor溢出，没有撑起应有的高度 footer布局在了tab后*/
}
/***************轮播图**********************************/
.index-drop {
  display: inline-block;
  width: 200px;
  display: flex;
  justify-content: center;
  background-color: rgb(51, 49, 49);
}
.droplink {
  color: #fff;
  font-size: 18px;
}
.ivu-col .ivu-menu-item {
  font-size: 16px;
}
.fir-menu .ivu-dropdown-item {
  font-size: 16px !important;
  display: flex;
  justify-content: space-between;
}
.banner-carousal:hover{
  cursor: pointer;
}
.carousal-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
  font-size: 50px;
  color: #fff;
}
</style>
